<template>
  <FIPopconfirm
    v-if="isVisible"
    v-bind="$attrs"
    v-on="$attrs"
    :width="width"
    :icon="WarningFilled"
    icon-color="var(--el-color-primary)"
    @confirm="clickButton"
    @cancel="cancelEvent"
  >
    <template #reference>
      <slot name="customeBtn">
        <div>
          <FIButton v-bind="{ ...btnBinds, ...$attrs }">
            <span v-if="buttonText">{{ buttonText }}</span>
          </FIButton>
        </div>
      </slot>
    </template>
  </FIPopconfirm>
  <FIButton v-else v-bind="{ ...btnBinds, ...$attrs }" @click.stop="beforePopShow">
    <span v-if="buttonText">{{ buttonText }}</span>
  </FIButton>
</template>

<script lang="ts" setup>
import FIButton from '@/components/FIButton.vue'
import FIPopconfirm from '@/components/FIPopconfirm.vue'

import { apiRequestPost } from '@/api/globalApi.js'
import { WarningFilled } from '@element-plus/icons-vue'
import { useMessage } from '@/hooks/message'
import { watch } from 'vue'
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: true,
  },
  // 弹窗气泡前拦截文案 当isVisible 为false时生效
  beforePopText: {
    type: String,
    default: '',
  },
  // 按钮文案
  buttonText: {
    type: String,
    default: '',
  },
  width: {
    type: [String, Number],
    default: '210px',
  },
  apiUrl: {
    type: String,
    default: '',
  },
  apiParams: {
    type: Object,
    default: () => ({}),
  },
  // 按钮剩余属性
  btnBinds: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['confirm', 'cancel', 'before-pop-show'])
watch(
  () => props.isVisible,
  (newTableData) => {}
)

// 如果有配置apiUrl则点击按钮时调用接口
const clickButton = () => {
  if (props.apiUrl) {
    apiRequestPost(props.apiUrl, props.apiParams)
      .then((res) => {})
      .catch((error: any) => {
        // 处理错误
      })
  }
  emit('confirm')
}
const cancelEvent = () => {
  emit('cancel')
}
const beforePopShow = () => {
  if (!props.isVisible) {
    useMessage().warning(props.beforePopText)
  }
  emit('before-pop-show')
}
</script>
<style lang="less" scoped></style>
